<template>
  <transition name="fade">
    <div
      class="shelf-title"
      :class="{ 'hide-shadow': ifHideShadow }"
      v-show="shelfTitleVisible"
    >
      <div class="shelf-title-text-wrapper">
        <span class="shelf-title-text">{{ title }}</span>
        <span class="shelf-title-sub-text" v-show="isEditMode">{{ selectedText }}</span>
      </div>
      <div class="shelf-title-btn-wrapper shelf-title-left" v-if="showClear">
        <span class="shelf-title-btn-text" @click="clearCache">{{
          $t('shelf.clearCache')
        }}</span>
      </div>
      <div class="shelf-title-btn-wrapper shelf-title-right" v-if="showEdit">
        <span class="shelf-title-btn-text" @click="onEditClick">{{
          isEditMode ? $t('shelf.cancel') : $t('shelf.edit')
        }}</span>
      </div>
      <div class="shelf-title-btn-wrapper shelf-title-left" v-if="showBack">
        <span class="icon-back" @click="back"></span>
      </div>
      <div
        class="shelf-title-btn-wrapper"
        :class="{
          'shelf-title-left': changeGroupLeft,
          'shelf-title-right': changeGroupRight
        }"
        @click="changeGroup"
        v-if="showChangeGroup"
      >
        <span class="shelf-title-btn-text">{{ $t('shelf.editGroup') }}</span>
      </div>
    </div>
  </transition>
</template>

<script>
  import { storeShelfMixin } from '../../utils/mixin'
  import { clearLocalStorage, saveBookShelf } from '../../utils/localStorage'
  import { clearLocalForage } from '../../utils/localForage'

  export default {
    mixins: [storeShelfMixin],
    props: {
      title: String
    },
    computed: {
      emptyCategory() {
        return (
          !this.shelfCategory ||
          !this.shelfCategory.itemList ||
          this.shelfCategory.itemList.length === 0
        )
      },
      showEdit() {
        return this.currentType === 1 || !this.emptyCategory
      },
      showClear() {
        return this.currentType === 1
      },
      showBack() {
        return this.currentType === 2 && !this.isEditMode
      },
      showChangeGroup() {
        return this.currentType === 2 && (this.isEditMode || this.emptyCategory)
      },
      changeGroupLeft() {
        return !this.emptyCategory
      },
      changeGroupRight() {
        return this.emptyCategory
      },
      selectedText() {
        const selectedNumber = this.shelfSelected ? this.shelfSelected.length : 0
        return selectedNumber <= 0
          ? this.$t('shelf.selectBook')
          : selectedNumber === 1
          ? this.$t('shelf.haveSelectedBook').replace('$1', selectedNumber)
          : this.$t('shelf.haveSelectedBooks').replace('$1', selectedNumber)
      },
      popupCancelBtn() {
        return this.createPopupBtn(this.$t('shelf.cancel'), () => {
          this.hidePopup()
        })
      }
    },
    watch: {
      offsetY(offsetY) {
        if (offsetY > 0) {
          this.ifHideShadow = false
        } else {
          this.ifHideShadow = true
        }
      }
    },
    data() {
      return {
        ifHideShadow: true
      }
    },
    methods: {
      onComplete() {
        // 隐藏
        this.hidePopup()
        // 删除分组
        this.setShelfList(
          this.shelfList.filter((book) => book.id !== this.shelfCategory.id)
        ).then(() => {
          saveBookShelf(this.shelfList)
          this.$router.go(-1)
          this.setIsEditMode(false)
        })
      },
      /**
       * 删除当前分组，并且把图书移动到外层书架或者分组
       */
      deleteGroup() {
        if (!this.emptyCategory) {
          // 所有图书置为选中状态
          this.setShelfSelected(this.shelfCategory.itemList)
          // 图书移出书架
          this.moveOutOfGroup(this.onComplete)
        } else {
          this.onComplete()
        }
      },
      changeGroupName() {
        this.hidePopup()
        this.dialog({
          showNewGroup: true,
          groupName: this.shelfCategory.title
        }).show()
      },
      hidePopup() {
        this.popupMenu.hide()
      },
      /**
       * @param {String} text 文本
       * @param {String} onClick 时间
       * @param {String} type 类型
       */
      createPopupBtn(text, onClick, type = 'normal') {
        return {
          text: text,
          type: type,
          click: onClick
        }
      },
      showDeleteGroup() {
        // 删除分组
        this.hidePopup()
        setTimeout(() => {
          this.popupMenu = this.popup({
            title: this.$t('shelf.deleteGroupTitle'),
            btn: [
              this.createPopupBtn(
                this.$t('shelf.confirm'),
                () => {
                  this.deleteGroup()
                },
                'danger'
              ),
              this.popupCancelBtn
            ]
          }).show()
        }, 200)
      },
      changeGroup() {
        this.popupMenu = this.popup({
          btn: [
            this.createPopupBtn(this.$t('shelf.editGroupName'), () => {
              this.changeGroupName()
            }),
            this.createPopupBtn(
              this.$t('shelf.deleteGroup'),
              () => {
                this.showDeleteGroup()
              },
              'danger'
            ),
            this.popupCancelBtn
          ]
        }).show()
      },
      back() {
        this.$router.go(-1)
        this.setIsEditMode(false)
      },
      onEditClick() {
        if (!this.isEditMode) {
          this.setShelfSelected([])
          // 当退出编辑模式时，会清空选中的图书
          this.shelfList.forEach((item) => {
            item.selected = false
            // 清空分组中选中的图书
            if (item.itemList) {
              item.itemList.forEach((subItem) => {
                subItem.selected = false
              })
            }
          })
        }
        this.setIsEditMode(!this.isEditMode)
      },
      clearCache() {
        // 清空LocalStorage和LocalForage的缓存
        clearLocalStorage()
        clearLocalForage()
        // 清空书架图书列表和选中的图书列表
        this.setShelfList([])
        this.setShelfSelected([])
        // 重新获取书架书架
        this.getShelfList()
        // 清除缓存的提示
        this.simpleToast(this.$t('shelf.clearCacheSuccess'))
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import '../../assets/styles/global.scss';

  .shelf-title {
    position: relative;
    z-index: 130;
    width: 100%;
    height: px2rem(42);
    background: white;
    box-shadow: 0 px2rem(2) px2rem(2) 0 rgba(0, 0, 0, 0.1);
    &.hide-shadow {
      box-shadow: none;
    }
    .shelf-title-text-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: px2rem(42);
      @include columnCenter;
      .shelf-title-text {
        font-size: px2rem(16);
        line-height: px2rem(20);
        font-weight: bold;
        color: #333;
      }
      .shelf-title-sub-text {
        font-size: px2rem(10);
        color: #333;
      }
    }
    .shelf-title-btn-wrapper {
      position: absolute;
      top: 0;
      box-sizing: border-box;
      height: 100%;
      @include center;
      .shelf-title-btn-text {
        font-size: px2rem(14);
        color: #666;
      }
      .icon-back {
        font-size: px2rem(20);
        color: #666;
      }
      &.shelf-title-left {
        left: 0;
        padding-left: px2rem(15);
      }
      &.shelf-title-right {
        right: 0;
        padding-right: px2rem(15);
      }
    }
  }
</style>
